<template>
  <view class="profile-page">
    <view class="card avatar">
      <image class="img" :src="form.avatar || 'https://placehold.co/100x100'" mode="aspectFill" />
      <button class="btn" @tap="changeAvatar">更换头像</button>
    </view>

    <view class="card form">
      <view class="field">
        <text class="label">昵称</text>
        <input class="ipt" v-model.trim="form.nickname" placeholder="请输入昵称" />
      </view>
      <view class="field">
        <text class="label">手机号</text>
        <input class="ipt" v-model.trim="form.phone" placeholder="请输入手机号" />
      </view>
    </view>

    <view class="ops">
      <button class="save" @tap="save">保存</button>
    </view>
  </view>
</template>

<script setup>
// 中文注释：个人资料页面
import { reactive, getCurrentInstance } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { userApi } from '@/api/index.js'

const { proxy } = getCurrentInstance()

const form = reactive({ nickname: '', phone: '', avatar: '' })

const fetchInfo = async () => {
  try {
    const data = await userApi.getUserInfo()
    form.nickname = data?.nickname || ''
    form.phone = data?.phone || ''
    form.avatar = data?.avatar || ''
  } catch (e) {
    proxy?.$showToast?.('加载失败')
  }
}

const save = async () => {
  try {
    await userApi.updateUserInfo({ nickname: form.nickname, phone: form.phone, avatar: form.avatar })
    uni.showToast({ title: '保存成功', icon: 'success' })
  } catch (e) {}
}

const changeAvatar = () => {
  proxy?.$showToast?.('示例：未接入上传')
}

onLoad(() => fetchInfo())
</script>

<style scoped lang="scss">
.profile-page { padding: 24rpx; }
.card { background: #fff; border-radius: 16rpx; padding: 24rpx; margin-bottom: 20rpx; }
.avatar { display: flex; align-items: center; gap: 20rpx; }
.img { width: 120rpx; height: 120rpx; border-radius: 60rpx; background: #f5f5f5; }
.btn { height: 64rpx; line-height: 64rpx; padding: 0 24rpx; border: none; border-radius: 12rpx; background: #ff6b00; color: #fff; font-size: 26rpx; }
.field { display: flex; align-items: center; padding: 16rpx 0; border-bottom: 1px solid #f5f5f5; }
.field:last-child { border-bottom: none; }
.label { width: 160rpx; color: #333; font-size: 28rpx; }
.ipt { flex: 1; height: 64rpx; line-height: 64rpx; font-size: 28rpx; }
.ops { padding: 0 8rpx; }
.save { width: 100%; height: 84rpx; line-height: 84rpx; background: #ff6b00; color: #fff; border: 0; border-radius: 12rpx; font-size: 30rpx; }
</style>
